/*
 * @Description: 某一标签下的文章
 * @Author: YWJ 
 * @Date: 2022-04-22 00:31:48 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-08 15:04:35
 */

<template>
  <div class="me-ct-body">
    <el-container class="me-ct-container">
      <el-main>
        <div class="me-ct-title me-area">
            <img
              class="me-ct-picture"
              :src="avatar"
            />
            <h3 class="me-ct-name">{{ tagName }}</h3>
        </div>

        <div class="me-ct-articles">
          <article-scroll-page v-bind:queryTagId="queryTagId">                                                                                           v-bind="article"></article-scroll-page>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ArticleScrollPage from "@/components/common/ArticleScrollPage"
import {getTagDetailsById} from "@/api/tag"
import global from '@/global/global';
export default {

    data(){
        return{
            avatar:"",
            tagName:"",
            queryTagId:null
        }
    },
    methods:{
        getTagArticles(){
            var id = this.$route.params.id;
            this.queryTagId = id;
            this.avatar = global.tagimg.get(id);
            this.tagName = global.tagmap.get(id);
        },
       

    },
    created(){
        this.getTagArticles();
    },
    components:{
        "article-scroll-page":ArticleScrollPage
    }
};
</script>

<style>
.me-ct-body {
  margin: 60px auto 140px;
  min-width: 100%;
}

.el-main {
  padding: 0;
}

.me-ct-title {
  text-align: center;
  height: 110px;
  padding: 20px;
}

.me-ct-picture {
  width: 60px;
  height: 60px;
}

.me-ct-name {
  font-size: 28px;
  margin-top: 10px;
}

.me-ct-meta {
  font-size: 12px;
  color: #969696;
}

.me-ct-articles {
  width: 640px;
  margin: 30px auto;
}
</style>